<template>
  <view class="accountP" >
    <u-navbar :is-back="true" title="账号管理"   :custom-back="BackM" back-text="">
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <view style="padding: 0rem 0.5rem; display: flex; align-items: center">
          <!-- <view style="
font-size: 0.75rem;
font-family: PingFang SC;
font-weight: 300;
color: #02AF74;" >员工规则</view> -->

          <!-- <image style="width: 0.7rem;
height: 0.5rem;
padding: 0.3rem;" src="../../../style/image/my/bottomArrow.jpg" alt=""> -->
        </view>
      </view>
    </u-navbar>

    <view style="padding: 0rem">
      <u-swipe-action
        v-for="(item, index) in showDatasList"
        :key="index"
        @click="click(item)"
        @open="open"
        :options="options"
      >
        <view class="showDatsC"  @click="changeAccountM(item)" >
          <view class="" style="border-bottom: 1px solid #e8e8e8;display: flex;align-items: center;">
            <view class="prolifyP" >
            <u-avatar :src="item.headImg"></u-avatar>
              <view class="leftAccount" style="margin-left: 1rem;">
                <view
                  style="
                    color: rgb(0, 0, 0);
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #666666;
                    margin-bottom: 0.1rem;
                  "
                  >{{  item.nickName==null?'暂未设置':item.nickName }}</view>
                <view
                  style="
                    font-size: 0.72rem;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: #333333;
                    width: 13rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                  "
                >
                  {{item.phone==null?'暂未设置':item.phone}}
                </view>

              </view>
              <!-- <image style="width: 0.9rem;height: 0.9rem;" src="../../style/image/stati/A30.png" alt=""> -->
            </view>

             <image  v-if="item.userId==userId"  @click="goCargoM" src='../../style/image/my/rights.png' style="width:1.1rem;height:0.8rem"  class="cargoBtn">
          </view>
        </view>
      </u-swipe-action>
    </view>

    <div class="addP">
      <div class="addItem"  @click="addM" >
          <image style="width:1.5rem;height:1.5rem;padding:0rem 0.5rem 0rem 0rem" src="../../style/image/my/addAccount.png" alt="">
          <div style="
font-size: 0.74rem;
font-family: PingFang SC;
font-weight: 500;
color: #02AF74;" >添加或注册新账号</div>
      </div>
    </div>

  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import uSwipeAction  from '../../uview-ui/components/u-swipe-action/u-swipe-action.vue'

import uNavbar from '@/uview-ui/components/u-navbar/u-navbar.vue'

import uAvatar  from  '../../uview-ui/components/u-avatar/u-avatar.vue'
@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components:{
    'u-swipe-action':uSwipeAction,
    'u-navbar':uNavbar,
    'u-avatar':uAvatar
  }
  
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  userId = uni.getStorageSync("userId");

  public showDatasList: Array<object> = [
    {
      branchName: "某某某",
      address: "13454345688134543456881345688",
    },
    {
      branchName: "某某某",
      address: "1345434568813454345688134568813454345688134543456881345688",
    },
    {
      branchName: "某某某",
      address: "13454345688134543456881345688",
    },
  ];
  public options = [
    // {
    //   text: "编辑",
    //   style: {
    //     backgroundColor: "#007aff",
    //   },
    // },
    {
      text: "删除",
      style: {
        backgroundColor: "#dd524d",
      },
    },
  ];

  created() {
    console.log(uni.getStorageSync("userId"), 'uni.getStorageSync("userId")');
  }

  mounted() {

    console.log("数:", uni.getStorageSync("account")); //暂时不考虑

    this.showDatasList = uni.getStorageSync("account");

    this.showDatasList = this.showDatasList.reduce(
      (all: any, next: any) =>
        all.some((item: any) => item.id == next.id) ? all : [...all, next],
      []
    );

    this.showDatasList.filter((item, index) => {
      console.log(item, "resres");
    });
  }



  BackM(){
      uni.navigateTo({
      url: '../../pages/set/index'
      });
  }


  changeAccountM(data:any){

  uni.showLoading({
	title: '切换中...'
});


      console.log('123123',data)


      this.userId=data.userId

        uni.setStorage({
        key: "userId",
        data: data.userId,
        success: function () {
        },
      });

        uni.setStorage({
        key: "userCard",
        data:data.card,
        success: function () {
        },
      });

     setTimeout(()=>{
     
       uni.hideLoading();
     },500)
      
  }

  addM() {
    uni.navigateTo({
      url: "../login/index",
    });
  }

  click(data: any) {
    console.log("123123", data.userId);

   

    this.showDatasList.filter((item: any, index: number) => {
      if (item.id == data.userId) {
        this.showDatasList.splice(index, 1);

        console.log(this.showDatasList);

        uni.setStorage({
          key: "account",
          data: this.showDatasList,
          success: function () {},
        });

         if(this.userId==data.userId){
         uni.clearStorageSync();
           }

      }
    });

    //  uni.getStorageSync("account").filter(()=>{

    //  })
    // uni.getStorageSync("account")=uni.getStorageSync("account").splice()
  }

  open(data: any) {
    // console.log("555", data);
  }
}
</script>

<style  scoped>
.accountP {
  background-color: #f3f5f7;
  height: 100vh;
}

.prolifyP {
  display: flex;
  padding: 0.8rem 1rem;
  justify-content: space-between;
  align-items: center;
}

/* 加上标签 或者加上>   */
.agentprolify {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
}

.agentprolify :first-child {
  font-size: 0.72rem;
  font-family: "PingFang SC";
  font-weight: 300;
  color: #666666;
}

.agentprolify > :nth-child(1) {
}
.agentprolify > :nth-child(2) {
  color: red;
}
.cargoBtn {
  /* background: #02af74;
  border-radius: 0.2rem;
  padding: 0.2rem;
  color: white; */
}
.addItem {
  display: flex;
  padding: 1rem 1rem;
  align-items: center;
  background-color: white;
}
</style>